<template>
  <div class="about">
    <!-- logo显示部分 -->
    <img src="../assets/logo.png" alt="">
    <h1>logo</h1>
    <h3>slogan</h3>

    <!-- 登录及注册按钮 -->
    <div id="button">
      <button @click="login()">
        LOGIN
      </button>
    </div>
      <span style="margin-top: 10px; font-size: 17px;">
      Already use?
      
      <span style="color:lightgoldenrodyellow; " @click="$router.push('/register')">sign on</span>
    </span>

    
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.$router.push('/login')
    }
  },
}
</script>

<style lang="scss" scoped>
.about {
  width: 100%;
  height: 800px;
  background: linear-gradient(to top right, #191D27 0%, #213B3F 50%, #141C29 100%);
  display: flex;
  flex-direction: column;
  align-items: center;

  // justify-content: space-around;
  >img {
    margin-top: 100px;
    width: 200px;
    height: 200px;
  }

  >h3 {
    margin-bottom: 110px;
  }

  #button {
    // >button {
    //   width: 250px;
    //   height: 50px;
    //   border-radius: 100px;
    //   background: linear-gradient(to right, #FF2B72, #FFE357);
    //   font-weight: bold;
    //   padding: 15px;
    //   color: rgb(255, 240, 254);
    // }
      >button {
         background: transparent;
         border: transparent;
         margin-left: 90px;
      }


  }
}
</style>